<template>

	 <div class="collectCasePending">
    <h3>结案待审批</h3>
		<AreaWarp :padding="true">
      <SearchWarp :label="'姓名'">
        <el-input v-model.trim="searchInfo.realname"    placeholder="请输入用户姓名"></el-input>
      </SearchWarp>
      <SearchWarp :label="'手机号'">
        <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
      </SearchWarp>
      <SearchWarp :label="'逾期天数'">
        <el-input class="inputWidth" v-model.trim="searchInfo.loanMoneyBegin"  placeholder="起始金额"></el-input>
        -
        <el-input class="inputWidth" v-model.trim="searchInfo.loanMoneyEnd"  placeholder="结束金额"></el-input>
      </SearchWarp>
      <SearchWarp :label="'逾期阶段'">
        <el-select v-model="searchInfo.convertDays"  placeholder="请选择">
          <el-option v-for="item in convertDaysOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
          </el-option>
        </el-select>
      </SearchWarp>
      <SearchWarp :label="'入催时间'">
        <el-date-picker v-model="searchInfo.auditTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :editable="false"></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'分配时间'">
        <el-date-picker v-model="searchInfo.auditTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :editable="false"></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'上次催收时间'">
        <el-date-picker v-model="searchInfo.auditTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :editable="false"></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'上次催收状态'">
        <el-select v-model="searchInfo.convertDays"  placeholder="请选择">
          <el-option v-for="item in convertDaysOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
          </el-option>
        </el-select>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'订单列表'"></AreaTitleWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false">
      <el-table :data="tableInfo.list" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row" header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column prop="appId" label="序号" min-width="120" :formatter="formatter_product"></el-table-column>
        <el-table-column prop="realName" label="姓名" min-width="120"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="overdays" label="逾期天数" min-width="120"></el-table-column>
        <el-table-column prop="overMoney" label="结案申请时间" min-width="180" :formatter="formatter_time"></el-table-column>
        <el-table-column prop="overMoney" label="申请人" min-width="120"></el-table-column>
        <el-table-column prop="overMoney" label="逾期金额" min-width="120"></el-table-column>
        <el-table-column prop="overMoney" label="放款金额" min-width="120"></el-table-column>
        <el-table-column prop="repayMoney" label="已还款金额" min-width="180"></el-table-column>
        <el-table-column prop="borrowId" label="操作" min-width="120">
          	<template slot-scope="scope">
          		<el-button type="text" size="small" @click="dblclick(scope.row)">同意</el-button>
          		<el-button type="text" size="small" @click="dblclick(scope.row)">拒绝</el-button>
          	</template>
          </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper" class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </AreaWarp>
	</div>
</template>
<script>
export default {
  data() {
    return {
      searchInfo: {},
      convertDaysOptions: [],
      tableInfo:{
        list:[],
        total:0
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {},
    reset() {}
  }
};
</script>
<style lang="less">
.collectCasePending {
  .inputWidth {
    width: 120px;
  }
}
</style>
